<template>
  <div>
    <el-dialog v-model="isDefault" title="插入变量" width="500px" :before-close="handleCloseDialog">
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
        <el-form-item label="选择变量" prop="value">
          <el-cascader ref="cascader" v-model="ruleForm.value" :options="options" :props="props"
            @change="getCheckedNodes(cascader)" filterable />
        </el-form-item>

        <el-form-item label="默认值" prop="input">
          <el-input v-model="ruleForm.input" clearable placeholder="请输入默认值" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseDialog">取消</el-button>
          <el-button type="primary" @click="submitForm(formRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import CanvasApi from "@/api/canvasApi.js";
import CustomerApi from "@/api/customerApi";
const prop = defineProps({
  isDefault: {
    type: Boolean,
    default: false,
  },
  isEdit: {
    type: Boolean,
    default: false,
  }
});
const store = useStore();
const emits = defineEmits(["setDefault"]);


const cascader = ref()
const rules = reactive({
  value: [
    { required: true, message: "请选择变量", trigger: ["blur", "change"] },
  ],
});
const props = ref({
  value: "propertyKey",
  label: "propertyName",
  children: "children",
});

const formRef = ref();
const options = ref([
  {
    propertyKey: "1",
    propertyName: "标签",
    children: [],
    key: '$_user',
  },
  {
    propertyKey: "3",
    propertyName: "活动",
    children: [],
    key: '$_activt',
  },
]);


const { isDefault } = toRefs(prop);
const { isEdit } = toRefs(prop);

const activiteList = ref([]);
const ruleForm = ref({
  value: "",
  input: "",
});

const theEchoForm = (obj) => {
  ruleForm.value = obj
};

const handleCloseDialog = () => {
  emits("update:isDefault", false);
  ruleForm.value = {
    value: "",
    input: "",
  };
};

const getActivityList = async () => {
  let params = {
    name: "",
    status: 1,
    currentPage: 1,
    showCount: -1,
  };
  let rs = await CanvasApi.getActivityList(params);
  if (rs.code === 200) {
    
    rs.payload.forEach((el) => {
      activiteList.value.push({
        propertyKey: el.actLink,
        propertyName: el.name,
      });
    });
    options.value[1].children = activiteList;
  }
};

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      submitData()


    } else {
      
      return false;
    }
  });
};
const submitData = () => {
  debugger
  if (isEdit.value) {
    emits("setDefaultEdit", nodes.value[0], ruleForm.value.input);
    handleCloseDialog();
  } else {
    emits("setDefault", nodes.value[0], ruleForm.value.input);
    handleCloseDialog();
  }


}
const nodes = ref([])
const getCheckedNodes = (val) => {
  nodes.value = cascader.value.getCheckedNodes()
  
}
const getAttributeList = async()=> {
      let params = {
        currentPage: 1,
        showCount: -1,
      };
      let rs = await CustomerApi.attributeList(params);
      if (rs.code === 200) {
        options.value[0].children = rs.payload;
      }
  }


onMounted(() => {
  // 
  getAttributeList()
  getActivityList();
});
defineExpose({ theEchoForm })
</script>
<style lang="scss" scoped>
.el-input {
  width: 224px;
}
:deep(.icon-arrow-down:before) {
  display: none;
}
</style>
